<template>
	<view class="index-content">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" title="商铺一号"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<HeaderTitle :title="i18nLocale=='ug'?shopdata.ug_name:shopdata.cn_name" :bottom="true" :lang="false"
			:combakflag="true"></HeaderTitle>
		<Header :shopdata="shopdata"></Header>
		<view class="topnav">
			<view :class="acnav==index?'item acitem':'item'" v-for="(item,index) in navList" @click="changeNav(index)">
				{{$t(item)}}
			</view>
		</view>
		<view class="cartshop">
			<CartShop v-if="acnav==0 && shopdata" :shopdata="shopdata" :shop_id="shop_id">
			</CartShop>
			<Appraise v-if="acnav==1" :shopdata="shopdata"></Appraise>
			<Vendor v-if="acnav==2" :shopdata="shopdata"></Vendor>

		</view>
		<Loading :show="loadshow" :text="$t('Loading')"></Loading>
		<view class="offshop" v-if="!shopdata.status" :dir="i18nLocale=='ug'?'rtl':''" >
		<view class="off-box" >
			<u-icon name="lock" color="#45BC1B" size="50"></u-icon>
			<view class="">{{$t('RestaurantClosed')}}</view>
			<view class="shop-time">
					<text>{{$t('BusinessHours')}}</text>
					{{shopdata.work_time}}
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import CartShop from "@/components/cart-shop/cart-shop.vue"
	import Header from "./Header.vue"
	import Appraise from "./Appraise.vue"
	import Vendor from "./Vendor.vue"
	import HeaderTitle from "@/components/HeaderTitle.vue"
	import {
		getshop
	} from '@/api/all.js';
	export default {
		components: {
			TopBar,
			Header,
			CartShop,
			HeaderTitle,
			Appraise,
			Vendor
		},

		data() {
			return {
				acnav: 0,
				loadshow: false,
				shopdata: '',
				shop_id: 1,
				dataList: [],
				navList: ['Menu', 'Evaluate', 'Vendor'],
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: this.$t('Home')
			})
			if (e.id) {
				this.shop_id = e.id;
			}
			this.getshoplist();
		},

		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			}
		},
		methods: {
			changeNav(index) {
				this.acnav = index;
			},
			//获取商铺商品
			getshoplist() {
				this.loadshow = true;
				let that = this;
				getshop({
					id: this.shop_id
				}).then(res => {
					if (res.code == 200) {
						let data = res.body.data;
						that.shopdata = data;
						let flag = this.$store.state.shop.totalshop.some(item => item.id === that.shopdata.id);
						this.loadshow = false;
						if (flag) {

						} else {
							this.$store.commit('setTotalshop', that.shopdata);
						}

						// this.Categoricalprocessing(that.columns,that.dataList)
					} else {
						console.log('错误');
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;

		.topnav {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: $uni-bg-color-box;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			font-size: $uni-font-size-base;

			.acitem {
				color: $uni-color-topic;
			}
		}

		.cartshop {
			width: 100%;
			height: calc(100% - 390rpx);
			box-sizing: border-box;
			position: relative;

		}

		.offshop {
			width: 100%;
			height: 100%;
			backdrop-filter: blur(3px);
			position: absolute;
			top: 0%;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.off-box{
				width:100%;
				height:350rpx;
				position: absolute;
				bottom:0%;
				left:0%;
				background-color: #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				// border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-lg;
				.shop-time{
					display: flex;
					align-items: center;
					color:$uni-text-color-grey;
					font-size: $uni-font-size-sm1;
					text{
						padding:0rpx 10rpx;
					}
				}
			}
		}
	}
</style>